import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import ProductDetail from './components/czs/ProductDetail';
import Cart from './components/czs/Cart';
import OrderConfirm from './components/czs/OrderConfirm';
import Payment from './components/czs/Payment';
import PaymentSuccess from './components/czs/PaymentSuccess';
import Orders from './components/czs/Orders';
import RegisterForm from './pages/ybs/RegisterForm'
import Login from './pages/ybs/Login'
import Test from './pages/ybs/Test'

import './App.css';
import { Link } from 'react-router-dom';


const Navbar = () => {
    const location = useLocation();
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const isActive = (path: string) => {
        return location.pathname === path;
    };
    useEffect(() => {
        document.title = '智电馆';
    })
    return (
        <header className="app-header">
            <div className="header-container">
                <div className="header-left">
                    <Link to="/" className="nav-logo">
                        <img src="../imgs/商标1.jpg" alt="智电馆" />
                        <span>智电馆</span>
                    </Link>
                    <nav className="main-nav">
                        <Link
                            to="/"
                            className={`nav-link ${isActive('/') ? 'active' : ''}`}
                        >
                            首页
                        </Link>
                        <Link
                            to="/cart"
                            className={`nav-link ${isActive('/cart') ? 'active' : ''}`}
                        >
                            购物车
                        </Link>
                        <Link
                            to="/orders"
                            className={`nav-link ${isActive('/orders') ? 'active' : ''}`}
                        >
                            我的订单
                        </Link>
                    </nav>
                </div>
                <div className="header-right">
                    <div className="user-menu">
                        <button
                            className="menu-toggle"
                            onClick={() => setIsMenuOpen(!isMenuOpen)}
                        >
                            <span className="user-icon">👤</span>
                            <span className="user-name">我的账户</span>
                        </button>
                        {isMenuOpen && (
                            <div className="dropdown-menu">
                                <Link to="/profile" className="dropdown-item">个人中心</Link>
                                <Link to="/favorites" className="dropdown-item">我的收藏</Link>
                                <Link to="/address" className="dropdown-item">收货地址</Link>
                                <div className="dropdown-divider"></div>
                                <button className="dropdown-item">退出登录</button>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </header>
    );
};

const Layout = ({ children }: { children: React.ReactNode }) => {
    return (
        <div className="app-layout">
            <Navbar />
            <main className="app-main">
                {children}
            </main>
            <footer className="app-footer">
                <div className="footer-content">
                    <div className="footer-section">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="#">公司介绍</a></li>
                            <li><a href="#">加入我们</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </div>
                    <div className="footer-section">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="#">购物指南</a></li>
                            <li><a href="#">支付方式</a></li>
                            <li><a href="#">配送说明</a></li>
                        </ul>
                    </div>
                    <div className="footer-section">
                        <h4>售后服务</h4>
                        <ul>
                            <li><a href="#">退货政策</a></li>
                            <li><a href="#">退货流程</a></li>
                            <li><a href="#">退款说明</a></li>
                        </ul>
                    </div>
                    <div className="footer-section">
                        <h4>关注我们</h4>
                        <div className="social-links">
                            <a href="#" className="social-link">微信</a>
                            <a href="#" className="social-link">微博</a>
                            <a href="#" className="social-link">抖音</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
};

const App = () => {
    return (
        <Router>
            <Layout>
                <Routes>
                    {/* <Route path="/test" element={<Test/>}></Route> */}
                    <Route path="/test" element={<div>Test Page</div>} />
                    <Route path="/" element={<ProductDetail />} />
                    <Route path="/cart" element={<Cart />} />
                    <Route path="/order-confirm" element={<OrderConfirm />} />
                    <Route path="/payment" element={<Payment />} />
                    <Route path="/payment-success" element={<PaymentSuccess />} />
                    <Route path="/orders" element={<Orders />} />
                    <Route path="/register" element={<RegisterForm/>}></Route>
                    <Route path="/login" element={<Login/>}></Route>
                </Routes>
            </Layout>
        </Router>
    );
};

export default App; 